<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login Form by Tooplate</title>
    <!--
    Template 2105 Input
    http://www.tooplate.com/view/2105-input
    -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/tooplate.css">

</head>

<body id="login">
<div class="container">
    <div class="row tm-register-row tm-mb-35">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-l">
            <form id="loginForm" method="post" class="tm-bg-black p-5 h-100">
                <div id="errorMsg" class="alert alert-danger" style="display:none;"></div>
                <div class="input-field">
                    <input placeholder="请输入用户名" id="username" name="username" type="text" class="validate">
                </div>
                <div class="input-field ">
                    <input placeholder="请输入密码" id="password" name="password" type="password" class="validate">
                </div>
                <div class="input-field ">
                    <input placeholder="请输入验证码" type="text" id="check" name="check" class="validate">
                </div>
                <div class="tm-flex-lr">
                    <a href="sendemail.html" class="white-text small">Forgot Password?</a>
                    <img src="/photograph/check/checkCode" id="imgCode" height="60px" alt="" onclick="changeCheckCode(this)"
                         style="cursor: pointer;">
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src = "/photograph/check/checkCode?" + new Date().getTime();
                        }
                    </script>
                </div>
            </form>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-r">
            <header class="font-weight-light tm-bg-black p-5 h-100">
                <h3 class="mt-0 text-white font-weight-light">Your Login</h3>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                <p class="mb-0">Vestibulum neque neque, porttitor quis lacinia eu, iaculis id dui. Mauris quis velit
                    lectus.</p>
                <!--登录注册按钮-->
                <div class="row" style="margin-top:35px;position: absolute">
                    <input id="loginButton" type="button"
                           class="waves-effect btn-large btn-large-white px-4 black-text rounded-0" value="login"
                           style="float: right">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 ml-auto mr-0 text-center">
                        <a href="register.html"
                           class="waves-effect btn-large btn-large-white px-4 black-text rounded-0">Rigister</a>
                    </div>
                </div>
            </header>

        </div>

    </div>

    <footer class="row tm-mt-big mb-3">
        <div class="col-xl-12 text-center">
            <p class="d-inline-block tm-bg-black white-text py-2 tm-px-5">
                Copyright &copy; 2018 Company Name
                - <a rel="nofollow" href="http://www.tooplate.com/view/2105-input">Input</a> by
                <a rel="nofollow" href="http://tooplate.com" class="tm-footer-link">Tooplate</a>
            </p>
        </div>
    </footer>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function () {
        $("#loginButton").click(function () {
            $.post("/photograph/user/login",
                $("#loginForm").serialize(),
                function (data) {
                    if (!data.flag) {
                        $("#errorMsg").html(data.errorMsg);
                        $("#errorMsg").css("display", "block");
                        changeCheckCode($("#imgCode").get(0));
                    } else {
                        history.back();
                    }
                }, "json")
        })
    })
    // $(document).ready(function () {
    //     $('select').formSelect();
    // });
</script>
</body>

</html>